html,
body {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.clearfix:after {
    display: block;
    clear: both;
    content: '';
    visibility: hidden;
    height: 0;
}

input,
button,
select,
textarea {
    outline: none;
}


/* page change */

$--transition-time: 300ms;
.back-enter-active,
.back-leave-active,
.forward-enter-active,
.forward-leave-active {
    will-change: transform;
    transition: transform $--transition-time;
    position: absolute;
    height: 100%;
    backface-visibility: hidden;
    perspective: 1000;
}

.back-enter {
    opacity: 0.75;
    transform: translate3d(-50%, 0, 0) !important;
}

.back-enter-active {
    z-index: -1 !important;
    transition: transform $--transition-time;
}

.back-leave-active {
    transform: translate3d(100%, 0, 0) !important;
    transition: transform $--transition-time;
}

.forward-enter {
    transform: translate3d(100%, 0, 0) !important;
}

.forward-enter-active {
    transition: transform $--transition-time;
}

.forward-leave-active {
    z-index: -1;
    opacity: 0.65;
    transform: translate3d(-50%, 0, 0) !important;
    transition: transform $--transition-time;
}

element.style {
    z-index: 10000;
}

// .centePage {
//     display: flex;
//     width: 100%;
//     height: auto;
//     justify-content: center;
//     align-items: center;
//     white-space: pre-wrap;
//     flex-direction: column;
// }